<template>
  <div class="wang-editor clearfix">
    <el-scrollbar style="height: 100%">
    <div class="main">
      <el-card class="box-card mb15" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16"><a class="ml5" target="_blank" href="https://www.kancloud.cn/wangfupeng/wangeditor3/332599">https://www.kancloud.cn/wangfupeng/wangeditor3/332599</a></span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            npm install wangeditor<br>
            <br>
            import E from 'wangeditor'<br>
            var editor = new E(this.$refs.editor)<br>
            editor.customConfig.onchange = (html) => {<br>
              &nbsp;&nbsp;this.editorContent = html<br>
            }<br>
            editor.create()<br>
            <br>
            &lt;div ref="editor" style="text-align:left"&gt;&lt;/div&gt;
          </code>
        </div>
      </el-card>
      <div>
        <div ref="editor" style="text-align:left"></div>
        <button class="mt20" v-on:click="getContent">查看内容</button>
      </div>
    </div>
    </el-scrollbar>
  </div>
</template>

<script>
import E from 'wangeditor'

export default {
  name: 'WangEditor',
  data () {
    return {
      editorContent: ''
    }
  },
  methods: {
    // 查看内容
    getContent: function () {
      alert(this.editorContent)
    }
  },
  mounted () {
    var editor = new E(this.$refs.editor)
    editor.customConfig.onchange = (html) => {
      this.editorContent = html
    }
    editor.create()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.wang-editor{
  margin: 0 auto;
  overflow: hidden;
  .main{
    padding: 10px;
  }
}
</style>
